<template>
  <div class="category-container">
    <a-card>
      <!-- 操作按钮 -->
      <div style="margin-bottom: 16px">
        <a-button type="primary" @click="handleAdd">新增分类</a-button>
      </div>

      <!-- 表格区域 -->
      <a-table
        :columns="columns"
        :data-source="categoryList"
        :loading="loading"
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-space>
              <a-button type="link" @click="handleEdit(record)">编辑</a-button>
              <a-popconfirm
                title="确定要删除这个分类吗？"
                @confirm="handleDelete(record)"
              >
                <a-button type="link" danger>删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
          <template v-if="column.key === 'createTime'">
            {{ formatDateTime(record.createTime) }}
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 编辑分类弹窗 -->
    <a-modal
      v-model:visible="modalVisible"
      :title="modalTitle"
      @ok="handleModalOk"
    >
      <a-form
        :model="categoryForm"
        :rules="rules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-form-item 
          label="分类名称" 
          name="name"
          :rules="[{ required: true, message: '请输入分类名称' }]"
        >
          <a-input v-model:value="categoryForm.name" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { 
  listCategoryByPageUsingPost,
  addCategoryUsingPost,
  updateCategoryUsingPost,
  deleteCategoryUsingPost
} from '@/api/categoryController';
import { formatDateTime } from '@/utils/format';

// 表格列定义
const columns = [
  {
    title: '分类ID',
    dataIndex: 'id',
    key: 'id',
    width: 100
  },
  {
    title: '分类名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 180
  },
  {
    title: '操作',
    key: 'action',
    width: 200
  }
];

// 表格数据
const categoryList = ref([]);
const loading = ref(false);

// 获取分类列表
const fetchCategoryList = async () => {
  loading.value = true;
  try {
    const res = await listCategoryByPageUsingPost({
      current: 1,
      pageSize: 100
    });
    categoryList.value = res.data.records;
  } catch (error) {
    // 移除错误处理，由拦截器统一处理
  } finally {
    loading.value = false;
  }
};

// 分类表单
const modalVisible = ref(false);
const modalTitle = ref('');
const categoryForm = ref({
  id: '',
  name: '',
  sort: 0,
  description: ''
});

// 表单规则
const rules = {
  name: [{ required: true, message: '请输入分类名称' }],
  sort: [{ required: true, message: '请输入排序值' }]
};

// 新增分类
const handleAdd = () => {
  modalTitle.value = '新增分类';
  categoryForm.value = {
    id: '',
    name: '',
    sort: 0,
    description: ''
  };
  modalVisible.value = true;
};

// 编辑分类
const handleEdit = (record: any) => {
  modalTitle.value = '编辑分类';
  categoryForm.value = { ...record };
  modalVisible.value = true;
};

// 保存分类
const handleModalOk = async () => {
  try {
    const api = categoryForm.value.id ? updateCategoryUsingPost : addCategoryUsingPost;
    const res = await api(categoryForm.value);
    message.success(`${modalTitle.value}成功`);
    modalVisible.value = false;
    fetchCategoryList();
  } catch (error) {
    // 移除错误处理，由拦截器统一处理
  }
};

// 删除分类
const handleDelete = async (record: any) => {
  try {
    const res = await deleteCategoryUsingPost({
      id: record.id
    });
    message.success('删除成功');
    fetchCategoryList();
  } catch (error) {
    // 移除错误处理，由拦截器统一处理
  }
};

onMounted(() => {
  fetchCategoryList();
});
</script>

<style scoped>
.category-container {
  padding: 24px;
}
</style> 